import React from 'react'
import { InfiniteScroll, List } from 'antd-mobile'
// 导入数据类型声明文件
import { listItem } from '@/types/dataTypes'
import { useNavigate } from 'react-router-dom'
type Props = {
    loadMore: () => any,
    hasMore: boolean,
    listdata: Array<listItem>
}

export default function ListCom(props: Props) {

    const navigate = useNavigate();

    return (
        <div className='listbox'>
            <List>
                {props.listdata.map((item, index) => (
                    <List.Item key={index} onClick={() => {
                        // 跳转到详情页
                        navigate('/detail/' + item.proid)
                    }}>
                        <img src={item.img1} alt="" />
                        <p className='desc'>{item.desc}</p>
                        <p className='price'>${item.sales}</p>
                    </List.Item>
                ))}
            </List>
            <InfiniteScroll loadMore={props.loadMore} hasMore={props.hasMore} />
        </div>
    )
}